import './Scss/EnvironmentStatistics.scss'
import { useRequest, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { Area } from '@ant-design/plots'
import { useState, useRef, useEffect } from 'react'

export const EnvironmentStatistics001 = ({ TenderStat }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Active, setActive] = useState('1')
    const [TableList] = useState([
        { uuid: '1', title: 'PM2.5' },
        { uuid: '2', title: 'PM10' },
        { uuid: '3', title: '风速' },
        { uuid: '4', title: '温度' },
        { uuid: '5', title: '湿度' },
        { uuid: '6', title: '风级' },
    ])

    const [MonitorData, setMonitorData] = useState([])
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    const { runAsync: getGetEnvironmentDetailData } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => setMonitorData(list),
    })

    useEffect(() => {
        if (TenderStat)
            getGetEnvironmentDetailData({
                url: 'getGetEnvironmentDetailData',
                data: { organizationUuid: TenderStat, day: 11 },
            })
    }, [TenderStat, getGetEnvironmentDetailData])

    useEffect(() => {
        switch (Active) {
            case '1':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.pm25 })))
                break
            case '2':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.pm10 })))
                break
            case '3':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.windSpeed })))
                break
            case '4':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.temperature })))
                break
            case '5':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.humidity })))
                break
            case '6':
                setData(MonitorData.map(item => ({ type: item.createTime, value: item.windLevel })))
                break
            default:
                break
        }
    }, [Active, MonitorData])

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                data,
                xField: 'type',
                yField: 'value',
                appendPadding: 24,
                color: '#B2FBFD',
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                smooth: true,
                areaStyle: () => {
                    return { fill: 'l(270) 0:rgba(178, 251, 253, 0)  1:rgba(178, 251, 253, 1)' }
                },
                point: { size: 4, shape: 'custom-point', style: { fill: '#B2FBFD' } },
            }
            setCharts(config)
        }
    }, [size, data])

    return (
        <div className="EnvironmentStatistics001">
            <div className="Left">
                {TableList.map(({ uuid, title }) => (
                    <div className={Active === uuid ? 'active' : ''} key={uuid} onClick={() => setActive(uuid)}>
                        {title}
                    </div>
                ))}
            </div>
            <div className="Right" ref={ChartsBox}>
                {Charts && <Area {...Charts} />}
            </div>
        </div>
    )
}
